<script setup>
import {onBeforeMount, ref} from "vue";
import {useRoute} from "vue-router";
import {useUserStore} from "@/store/user.js";
import ArticleItem from "@/components/articleItem.vue";
import {goBackToThePreviousPage} from "@/util/common.js";
import {
  getArticleByKnowledgeBaseId,
  getKnowledgeBaseById,
  getUserByKnowledgeBaseId,
  joinKnowledgeBase
} from "@/api/request.js";
import axios from "axios";
import {showToast} from "vant";
import UserInKnowledgeBase from "@/components/userInKnowledgeBase.vue";

const knowledgeBaseId = Number(useRoute().params.id)
const store = useUserStore()
const active = ref(0)

const knowledgeBaseInfo = ref({})
const userInfo = ref({})
const articleList = ref([])
const userList = ref([])

onBeforeMount(async () => {
  await getKnowledgeBaseById({
    userId: store.userId,
    knowledgeBaseId: knowledgeBaseId
  }).then(res => {
    console.log(res.data)
    if (res.data !== null) {
      knowledgeBaseInfo.value = res.data.knowledgeBase
      userInfo.value = res.data.user
      join.value = res.data.joined
    } else {
      showToast("获取知识库信息失败")
    }
  }).catch(err => {
    console.log(err)
  })

  await getArticleByKnowledgeBaseId({
    knowledgeBaseId: knowledgeBaseId
  }).then(res => {
    if (res.data !== null) {
      articleList.value = res.data
      console.log(articleList.value)
    } else {
      showToast("没有相关文章")
    }
  }).catch(err => {
    console.log(err)
  })

  if(userInfo.value.id !== 1) {
    await getUserByKnowledgeBaseId({
      knowledgeBaseId: knowledgeBaseId
    }).then(res => {
      if (res.data !== null) {
        userList.value = res.data
      } else {
        showToast("获取用户信息失败")
      }
      console.log(userList.value)
    }).catch(err => {
      console.log(err)
    })
  }
})

const join = ref(false)
const joinOnClick = () => {
  joinKnowledgeBase({
    userToBase: {
      userId: store.userId,
      knowledgeBaseId: knowledgeBaseId
    }
  }).then(res => {
    if (res.code === 200) {
      showToast("加入成功")
      join.value = true
    } else {
      showToast("加入失败")
    }
  }).catch(err => {
    console.log(err)
  })
}

const quitOnClick = () => {
  // TODO 退出知识库
}
</script>

<template>
  <van-nav-bar fixed left-arrow title="知识库详情" @click-left="goBackToThePreviousPage"/>

  <div class="app-container">
    <div class="base-info-box">
      <div class="box-top">
        <div class="knowledge-base-icon">
          <div :style="{backgroundColor: knowledgeBaseInfo.backgroundColor}" class="icon-box">
            <img :alt="`知识库：${knowledgeBaseInfo.name}`"
                 :src="`${axios.defaults.baseURL}/icon/${knowledgeBaseInfo.icon}`">
          </div>
        </div>
        <div class="content">
          <div class="name">{{ knowledgeBaseInfo.name }}</div>
          <div class="author">创建者：{{ userInfo.username }}</div>
          <div class="time">创建时间：{{ knowledgeBaseInfo.createTime }}</div>
        </div>
      </div>
      <van-divider/>
      <div class="knowledge-base-intro">
        <div class="intro">{{ knowledgeBaseInfo.intro }}</div>
      </div>
    </div>

    <div class="btn-box" v-if="knowledgeBaseInfo.userId !== 1 && store.userId !== userInfo.id">
      <van-button  v-if="!join" size="small" type="primary"
                  @click="joinOnClick">加入知识库
      </van-button>
      <van-button v-if="join" size="small" type="warning"
                  @click="quitOnClick">退出知识库
      </van-button>
    </div>

    <van-tabs v-model="active" sticky :style="{marginTop: '1rem'}">
      <van-tab title="文章">
        <div class="article-box">
          <van-empty v-if="articleList.length === 0" description="没有相关文章" image="network" image-size="5rem"/>
          <template v-for="item in articleList" v-else>
            <ArticleItem :article="item.article" :knowledge-bases="item.knowledgeBases" :user="item.user"></ArticleItem>
          </template>
        </div>
      </van-tab>

      <van-tab title="用户">
        <div class="user-box">
          <van-empty v-if="userInfo.id !== 1 && userList.length === 0" description="没有相关用户" image="network" image-size="5rem"/>
          <van-empty v-else-if="userInfo.id === 1" description="公共知识库，用户为空" image="network" image-size="5rem"/>
          <template v-for="item in userList">
            <UserInKnowledgeBase :user="item" :knowledge-base-id="knowledgeBaseId"></UserInKnowledgeBase>
          </template>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<style lang="scss" scoped>
.app-container {
  height: 100vh;
  padding: 3rem .5rem 0;
  box-sizing: border-box;

  .base-info-box {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
    padding: 1rem;
    background-color: #fff;

    .box-top {
      display: flex;

      .knowledge-base-icon {
        width: 5rem;
        height: 5rem;

        .icon-box {
          width: 5rem;
          height: 5rem;
          margin: auto;
          border-radius: .5rem;
          display: flex;
          justify-content: center;
          align-items: center;

          img {
            width: 61.8%;
            height: 61.8%;
          }
        }
      }

      .content {
        margin-left: 1rem;

        .name {
          font-size: 1.5rem;
          font-weight: bold;
          color: #333;
        }

        .author, .time {
          font-size: 1rem;
          color: #999;
        }
      }
    }

    .knowledge-base-intro {
      color: #666;;
    }
  }

  .btn-box {
    margin-top: 1rem;
  }
}


.article-box, .user-box {
  padding: .5rem;
  background-color: #fff;
}
</style>